<template>
  <ul>
    <li v-for="(menu,index) in menus" @click="changeRouter(menu)" :key="index" :class="{'actived':actived==menu.title}" >{{menu.title}}</li>
    <!-- <li class="actived">测试</li> -->
  </ul>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const actived = ref('')

const menus = [{
    title:'icon'
},{
    title:'button'
},{
    title:'timer'
},{
    title:'dialog'
},{
    title:'spin'
}]
 
const changeRouter = (menu) => { 
    actived.value=menu.title
    router.push({
        path:'/'+ menu.title
    })
}

</script>
<style scoped>
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  padding-left: 40px;
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-inline: 4px;
  margin-block: 4px;
  width: calc(100% - 8px);
  color: rgba(0, 0, 0, 0.88);
  background: #ffffff;
}

li:hover{
    background:rgb(240,240,240);
    cursor: pointer;
    border-radius: 4px;
}
li.actived{
  background-color: #e6f4ff;
}
</style>
